<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>记账本</title>
    <style>
        span{
            border: 1px solid #9d9c9d;
            border-radius: 3px;
            margin: 3px;
            padding: 2px;
            font-size: 1em;
        }
        #mem{
            margin: 10px;
        }
    </style>
</head>
<body>
<input id="1" placeholder="请输入新成员名字">
<button onclick="addMember()">添加新成员</button>
<div id="mem">
    <span>liao</span>
</div>

<select id="sele">

</select>
<input id="money" placeholder="花费（元">
<input id="remark" placeholder="备注">
<button onclick="addSpend()">添加流水</button>
<div>
    <label>总花费:</label>
    <span id="sum"></span>
</div>

<div id="spend">
    <p></p>
</div>
<script>
    var member= new Object();
    var spend = new Object();
    var sum = 0;


    document.onload
    {
        if (localStorage.member) {
            member = JSON.parse(localStorage.member);
        }
        if (localStorage.spend) {
            spend = JSON.parse(localStorage.spend);
        }

        var m;
        for (m in member) {
            var x = document.getElementById("mem");
//            var str = "<span>" + m + "</span>";

            var childNode = document.createElement("span");
            childNode.innerHTML = m;
            x.appendChild(childNode);

            var option = document.createElement("option");
            option.innerHTML = m;
            document.getElementById("sele").appendChild(option);
        }

        var o;
        for (o in spend) {
            var p = document.createElement("p");
            p.innerHTML = o + " " + spend[o]["mem"] + " " + spend[o]["money"] + " " + spend[o]["remark"];
            document.getElementById("spend").appendChild(p);

            member[spend[o]["mem"]] += spend[o]["money"];
            sum += Number(spend[o]["money"]);
        }


        document.getElementById("sum").innerText=sum;
    }


        function addMember() {
            var text = document.getElementById("1").value;
            for(m in member)
            {
                if(m == text){
                    alert("该成员已存在");
                    return;
                }
            }

            member[text]=0;
            localStorage.member = JSON.stringify(member);

            var x = document.getElementById("mem");
            var childNode=document.createElement("span");
            childNode.innerHTML = text;
            x.appendChild(childNode);

            var option = document.createElement("option");
            option.innerHTML = text;
            document.getElementById("sele").appendChild(option);

        }

        function addSpend()
        {
            var mem = document.getElementById("sele").value;
            var money = Number(document.getElementById("money").value);
            var remark = document.getElementById("remark").value;
            var dateObj=new Date();
            var date = dateObj.toLocaleString();
            var o = new Object();

            o["mem"] = mem;
            o["money"] = money;
            o["remark"] = remark;
            spend[date] = o;
            localStorage.spend=JSON.stringify(spend);

            var p = document.createElement("p");
            p.innerHTML = date+" "+mem+" "+money+" "+remark;
            document.getElementById("spend").appendChild(p);

            member[mem]+=money;
            localStorage.member = JSON.stringify(member);

            sum+=money;
            document.getElementById("sum").innerText=sum;
        }

</script>
</body>

</html>